﻿<Page
    x:Class="StylesDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:StylesDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>

        <!-- styles -->

        <Style TargetType="Button" x:Name="ButtonBase">
            <Setter Property="Height" Value="200" />
            <Setter Property="Width" Value="200" />
        </Style>

        <Style TargetType="Button" x:Name="RedButton" BasedOn="{StaticResource ButtonBase}">
            <Setter Property="Background" Value="Red" />
            <Setter Property="Foreground" Value="White" />
        </Style>

        <Style TargetType="Button" x:Name="WhiteButton" BasedOn="{StaticResource ButtonBase}">
            <Setter Property="Background" Value="White" />
            <Setter Property="Foreground" Value="Black" />
        </Style>

        <Style TargetType="Button" x:Name="BlueButton" BasedOn="{StaticResource ButtonBase}">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="Foreground" Value="White" />
        </Style>

        <!-- control templates -->

        <ControlTemplate x:Name="BadgeTemplate">
            <Grid Height="200" Width="200" >
                <Ellipse Width="163.333" Height="96" Stretch="Fill" Fill="#FF1E4173"/>
                <Ellipse Width="129.873" Height="76.3333" Stretch="Fill" Fill="#FF3E67A3"/>
                <Path Width="109.333" Height="147.937" Stretch="Fill" Fill="Gainsboro" Data="F1 M 213.769,129.396C 200.068,150.042 186.367,170.688 177.739,195.233C 169.111,219.778 165.556,248.222 162,276.667C 188,252.444 214,228.222 232.222,228.333C 250.444,228.444 260.889,252.889 271.333,277.333C 265.556,248.444 259.778,219.556 250.184,194.899C 240.59,170.243 227.179,149.82 213.769,129.396 Z "/>
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="Black"  />
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Name="EllipseTemplate">
            <Grid Height="200" Width="200" >
                <Ellipse Fill="{TemplateBinding Background}" />
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{TemplateBinding Foreground}"  />
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Name="StarTemplate">
            <Grid Height="200" Width="200" >
                <Path Height="200" Width="200" Stretch="Fill" Fill="{TemplateBinding Background}" Data="F1 M 256.796,259.312L 244.147,196.138L 290.764,151.665L 226.773,144.172L 198.882,86.0943L 171.982,144.638L 108.128,153.217L 155.494,196.891L 143.921,260.271L 200.094,228.719L 256.796,259.312 Z "/>
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{TemplateBinding Foreground}"  />
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Name="StormTemplate">
            <Grid Height="200" Width="200" >
                <Path Height="200" Width="200" Stretch="Fill" Fill="{TemplateBinding Background}" Data="F1 M 141.411,114.617C 140.173,120.23 138.935,125.842 138.235,131.397C 137.534,136.952 137.372,142.449 137.716,147.795C 138.06,153.141 138.91,158.335 140.219,163.293C 141.528,168.25 143.296,172.971 145.461,177.381C 147.627,181.79 150.191,185.888 153.081,189.612C 155.97,193.336 159.186,196.687 162.646,199.616C 166.105,202.546 169.81,205.054 173.514,207.563C 171.299,207.805 169.084,208.047 166.705,208.052C 164.326,208.058 161.783,207.827 159.125,207.316C 156.467,206.806 153.693,206.016 150.861,204.913C 148.028,203.81 145.137,202.395 142.25,200.645C 139.363,198.894 136.481,196.808 133.672,194.377C 130.863,191.946 128.127,189.169 125.535,186.049C 122.943,182.929 120.495,179.466 118.047,176.004C 120.706,181.099 123.365,186.194 126.399,190.899C 129.433,195.604 132.843,199.92 136.542,203.794C 140.242,207.668 144.232,211.101 148.421,214.057C 152.611,217.014 157,219.494 161.493,221.479C 165.986,223.465 170.584,224.956 175.192,225.951C 179.799,226.947 184.416,227.447 188.95,227.467C 193.483,227.487 197.933,227.028 202.383,226.568C 200.842,228.178 199.301,229.787 197.482,231.32C 195.663,232.854 193.567,234.311 191.202,235.628C 188.838,236.946 186.205,238.124 183.327,239.1C 180.448,240.076 177.323,240.85 173.987,241.365C 170.65,241.879 167.101,242.134 163.387,242.078C 159.672,242.021 155.791,241.652 151.8,240.928C 147.809,240.205 143.708,239.125 139.607,238.046C 144.919,240.24 150.231,242.434 155.58,244.088C 160.929,245.742 166.314,246.856 171.639,247.446C 176.963,248.036 182.226,248.1 187.336,247.672C 192.445,247.244 197.402,246.323 202.12,244.956C 206.838,243.589 211.319,241.775 215.489,239.576C 219.658,237.377 223.516,234.792 227.002,231.894C 230.488,228.995 233.601,225.783 236.715,222.571C 236.569,224.794 236.422,227.018 236.015,229.361C 235.607,231.705 234.938,234.169 233.973,236.698C 233.009,239.227 231.749,241.821 230.172,244.419C 228.594,247.018 226.698,249.619 224.473,252.158C 222.248,254.697 219.693,257.174 216.811,259.518C 213.929,261.862 210.719,264.074 207.197,266.085C 203.674,268.096 199.839,269.906 196.003,271.715C 201.483,269.981 206.962,268.247 212.123,266.076C 217.284,263.905 222.125,261.297 226.583,258.326C 231.041,255.355 235.114,252.022 238.753,248.409C 242.392,244.797 245.597,240.906 248.333,236.825C 251.068,232.745 253.335,228.476 255.116,224.111C 256.896,219.747 258.19,215.287 258.997,210.826C 259.804,206.365 260.125,201.902 260.445,197.44C 261.762,199.238 263.079,201.035 264.273,203.092C 265.468,205.15 266.539,207.467 267.425,210.024C 268.312,212.582 269.015,215.379 269.477,218.383C 269.938,221.388 270.158,224.599 270.085,227.975C 270.013,231.35 269.648,234.889 268.947,238.537C 268.246,242.186 267.209,245.944 265.803,249.748C 264.397,253.553 262.622,257.404 260.847,261.256C 263.93,256.405 267.013,251.555 269.571,246.575C 272.129,241.594 274.161,236.484 275.666,231.343C 277.172,226.202 278.15,221.03 278.615,215.924C 279.081,210.817 279.034,205.777 278.507,200.892C 277.98,196.008 276.972,191.281 275.531,186.793C 274.089,182.305 272.214,178.056 269.965,174.12C 267.715,170.184 265.092,166.56 262.47,162.936C 264.634,163.466 266.798,163.996 269.035,164.805C 271.273,165.613 273.583,166.7 275.906,168.089C 278.229,169.478 280.565,171.169 282.85,173.174C 285.135,175.179 287.368,177.497 289.482,180.13C 291.596,182.762 293.591,185.708 295.399,188.953C 297.207,192.199 298.829,195.744 300.197,199.562C 301.566,203.38 302.682,207.471 303.798,211.563C 303.042,205.865 302.285,200.168 301.043,194.709C 299.801,189.25 298.074,184.028 295.922,179.123C 293.771,174.217 291.195,169.626 288.27,165.415C 285.344,161.204 282.068,157.373 278.525,153.97C 274.982,150.567 271.171,147.594 267.182,145.082C 263.193,142.571 259.025,140.522 254.772,138.953C 250.519,137.383 246.18,136.293 241.842,135.203C 243.84,134.217 245.839,133.232 248.072,132.414C 250.306,131.595 252.774,130.943 255.447,130.513C 258.119,130.084 260.996,129.877 264.035,129.945C 267.074,130.012 270.275,130.353 273.586,131.011C 276.898,131.668 280.319,132.642 283.791,133.966C 287.262,135.29 290.783,136.964 294.285,139.009C 297.788,141.054 301.273,143.471 304.758,145.888C 300.516,142.009 296.275,138.131 291.814,134.747C 287.354,131.363 282.674,128.474 277.872,126.099C 273.071,123.724 268.147,121.863 263.199,120.518C 258.251,119.173 253.279,118.343 248.378,118.014C 243.476,117.685 238.645,117.856 233.975,118.497C 229.305,119.137 224.796,120.247 220.529,121.778C 216.262,123.31 212.237,125.263 208.213,127.217C 209.111,125.178 210.009,123.138 211.193,121.075C 212.378,119.013 213.85,116.926 215.621,114.88C 217.392,112.833 219.463,110.826 221.834,108.924C 224.205,107.022 226.877,105.226 229.836,103.601C 232.796,101.976 236.043,100.523 239.553,99.3057C 243.063,98.0885 246.836,97.1074 250.834,96.4226C 254.832,95.7378 259.055,95.3492 263.278,94.9607C 257.535,94.716 251.793,94.4714 246.201,94.7465C 240.609,95.0216 235.168,95.8164 229.963,97.0834C 224.758,98.3503 219.79,100.089 215.135,102.239C 210.48,104.389 206.138,106.95 202.171,109.848C 198.205,112.747 194.615,115.984 191.449,119.476C 188.283,122.968 185.542,126.717 183.257,130.633C 180.973,134.549 179.146,138.632 177.319,142.716C 176.696,140.576 176.073,138.437 175.654,136.095C 175.236,133.753 175.022,131.209 175.063,128.503C 175.105,125.797 175.401,122.928 175.995,119.947C 176.589,116.966 177.481,113.872 178.703,110.726C 179.926,107.579 181.479,104.378 183.386,101.189C 185.292,98.0008 187.552,94.8241 190.174,91.7297C 192.797,88.6353 195.782,85.6232 198.767,82.6111C 194.211,86.1147 189.655,89.6183 185.548,93.4234C 181.441,97.2286 177.784,101.335 174.611,105.652C 171.438,109.968 168.75,114.493 166.566,119.132C 164.382,123.772 162.702,128.524 161.526,133.294C 160.351,138.064 159.681,142.851 159.501,147.562C 159.321,152.272 159.63,156.906 160.397,161.374C 161.165,165.842 162.39,170.144 163.615,174.447C 161.763,173.208 159.91,171.97 158.084,170.445C 156.259,168.92 154.46,167.109 152.752,165.009C 151.043,162.909 149.426,160.521 147.965,157.856C 146.504,155.191 145.199,152.248 144.113,149.051C 143.026,145.855 142.159,142.404 141.57,138.736C 140.981,135.068 140.67,131.182 140.69,127.126C 140.709,123.07 141.06,118.844 141.411,114.617 Z "/>
                <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="{TemplateBinding Foreground}"  />
            </Grid>
        </ControlTemplate>

    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <TextBlock Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="120,40,0,100">
            Controls can be styled and templated
        </TextBlock>

        <ItemsControl VerticalAlignment="Center" HorizontalAlignment="Center">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="20,10">

                        <!-- target -->
                        <Button Style="{StaticResource ButtonBase}" Click="Target_Click_1">Click Me</Button>

                        <!-- controls -->
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_1" Margin="0,20,0,0">
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Height="20" Width="20" Fill="Red" Margin="10,0" />
                                <TextBlock>Red Style</TextBlock>
                            </StackPanel>
                        </Button>
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_2">
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Height="20" Width="20" Fill="White" Margin="10,0" />
                                <TextBlock>White Style</TextBlock>
                            </StackPanel>
                        </Button>
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_3">
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Height="20" Width="20" Fill="Blue" Margin="10,0" />
                                <TextBlock>Blue Style</TextBlock>
                            </StackPanel>
                        </Button>
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_5" Margin="0,20,0,0">Circle Template</Button>
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_6">Star Template</Button>
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_7">Storm Template</Button>
                        <Button HorizontalAlignment="Stretch" Click="Button_Click_4">Badge Template</Button>

                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <x:Int32>1</x:Int32>
            <x:Int32>2</x:Int32>
            <x:Int32>3</x:Int32>
            <x:Int32>4</x:Int32>
        </ItemsControl>

    </Grid>
</Page>
